<script setup lang="ts">
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import { computed } from 'vue';
const router=useRouter()
function backClick(){
    router.go(-1)
}
const value=ref('')
const value2=ref('')
const value3=ref('')
let  values=localStorage.getItem('usermessage')||''
let newvalues=JSON.parse(values)
function changeClick(){
    let  lvalues=localStorage.getItem('login')||''
    let lnewvalues=JSON.parse(values)
  
            if(newvalues.password ==value.value){
                console.log('密码不能和之前密码一致');    
            }else{
                newvalues.password =value.value
                console.log('密码修改成功');
                newvalues=JSON.stringify(newvalues)
                localStorage.setItem('usermessage',String(newvalues))
                router.push('/mine')
            }
            for (let i = 0; i < lnewvalues.length; i++) {
        if(lnewvalues[i].tel==newvalues.tel){
                lnewvalues[i].password =value.value
                lnewvalues=JSON.stringify(lnewvalues)
                localStorage.setItem('login',String(lnewvalues))
        }
        
    }
        
    
}
const flag = computed(() => {
    return value.value.length <=6||value.value !=value2.value||newvalues.password!=value3.value
    })
</script>
<template>

    <main class="box">
        <header class="header">
      <slot  name="left">
      <div class="back">
        <van-icon color="#d6d6d6" size="20" @click="backClick" name="arrow-left" />
        <span @click="backClick">返回</span>
      </div>
 
      </slot>
      <span>修改密码</span>
      <slot name="right"></slot>
  </header>
    <div class="content"> 
        <van-field
    v-model="value3"
    left-icon="lock"
    placeholder="输入旧密码"
    class="password3"
  >
  </van-field>
    <van-field
    v-model="value"
    left-icon="lock"
    placeholder="输入新密码"
    class="password"
  >
  </van-field>
  <van-field
    v-model="value2"
    left-icon="lock"
    placeholder="输入再次输入密码"
    class="password2"
  >
  </van-field>
  <button class="login" :disabled="flag" @click="changeClick">确认</button>
    </div>
    </main>
</template>

<style lang="scss" scoped>
.header{
    color: black;
    background-color: white;
   .back{
    position: absolute;
    left: 0;
    top: 0;
    span{
        color: blue;
    }
   }
}
.content{
    background-color: #f4f6f9;
}
.password3{
    position: absolute;
        width: 100%;
        height: 50px;
        left: 0;
        top: 0.6rem;
      
}
.password{
        position: absolute;
        width: 100%;
        height: 50px;
        left: 0;
        top: 1.06rem;
 
    }
    .password2{
        position: absolute;
        width: 100%;
        height: 50px;
        left: 0;
        top: 1.52rem;
 
    }
 
    .login{
            position: absolute;
        width: 90%;
        background-color: #4a73ff;
        height: 56px;
        left: 5%;
        top: 2.4rem;
        border-radius: 10px;
        color: white;
        font-size: 20px;
        }
</style>
    